<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
	<meta name="format-detection" content="telephone=no">
	<title>基本信息</title>
	<link rel="stylesheet" href="http://xhh.wasd1.cn/static/css/base.css">
	<link rel="stylesheet" href="../css/icon.css">
	<link rel="stylesheet" href="../css/LArea.css">
	<link rel="stylesheet" href="../css/index.css">
</head>
<body>
<div id="basic" class="flexv wrap">
	<div class="flex center head">
		<a href="javascript:;" class="bls bls-zjt"></a>
		<h1 class="flexitem center">基本信息</h1>
		<a href="javascript:;" class="bls bls-dian"></a>
	</div>
	
	<div class="flexitemv user">
		<div class="users">
			<div class="item portrait">
				<span class="flex centerv">头像</span>
				<div class="flex centerv right">
					<div class="flex center userimg">
						<img src="../image/banner.jpg" class="fitimg">
					</div>
					<i class="flex center bls bls-yjt"></i>
				</div>
				<input type="file" accept="image/*" id="choiseimg">
			</div>
			<div class="item name">
				<span class="flex centerv">姓名</span>
				<div class="flex centerv right">
					<input type="text" class="flexi center userimg" placeholder="轩轩">
					<i class="flex center bls bls-yjt"></i>
				</div>
			</div>
			<div class="item phone">
				<span class="flex centerv">手机号</span>
				<div class="flex centerv right">
					<input type="tel" class="flex center userimg" placeholder="138****4623">
					<i class="flex center bls bls-yjt"></i>
				</div>
			</div>
		</div>
		<div class="users">
			<div class="item brand">
				<span class="flex centerv">我的品牌</span>
				<div class="flex centerv right">
					<input readonly="readonly" class="flex center userimg" type="text" placeholder="请选择">
					<i class="flex center bls bls-yjt"></i>
				</div>
			</div>
			<div class="item area">
				<span class="flex centerv">从业地区</span>
				<div class="flex centerv right">
					<input id="sel_city" readonly="readonly" class="flex center userimg" type="text" placeholder="请选择">
					<i class="flex center bls bls-yjt"></i>
				</div>
				
			</div>
		</div>
		<div class="users">
			<div class="item qrcode">
				<span class="flex centerv">个人微信二维码</span>
				<div class="flex centerv right">
					<div class="flex center userimg">请上传</div>
					<i class="flex center bls bls-yjt"></i>
				</div>
				<input type="file" accept="image/*" id="qrcodeimg">
			</div>
		</div>
		
		<a href="javascript:;" class='clook'>查看如何获取二维码？</a>
		<div class="button">
			<a href="javascript:;" class="flex center">保存</a>
		</div>
	</div>
	
	<div class="flex center bottom">&copy;&ensp;2017&ensp;事业头条&ensp;版权所有</div>
	<!--品牌-->
	<div id="brand" class="flexv dialog_box">
		<div class="flex center head">
			<a href="javascript:;" class="bls bls-zjt"></a>
			<h1 class="flexitem center" style="margin-left: -2rem;">选择品牌</h1>
		</div>
		<ul class="flexitemv mainbox company" style="padding-top: 20px">
		
		</ul>
		<ul class="lettrt">
			<li><a href="#">#</a></li>
			<li><a href="#A">A</a></li>
			<li><a href="#B">B</a></li>
			<li><a href="#C">C</a></li>
			<li><a href="#D">D</a></li>
			<li><a href="#E">E</a></li>
			<li><a href="#F">F</a></li>
			<li><a href="#G">G</a></li>
			<li><a href="#H">H</a></li>
			<li><a href="#I">I</a></li>
			<li><a href="#J">J</a></li>
			<li><a href="#K">K</a></li>
			<li><a href="#L">L</a></li>
			<li><a href="#M">M</a></li>
			<li><a href="#N">N</a></li>
			<li><a href="#O">O</a></li>
			<li><a href="#P">P</a></li>
			<li><a href="#Q">Q</a></li>
			<li><a href="#R">R</a></li>
			<li><a href="#S">S</a></li>
			<li><a href="#T">T</a></li>
			<li><a href="#U">U</a></li>
			<li><a href="#V">V</a></li>
			<li><a href="#W">W</a></li>
			<li><a href="#X">X</a></li>
			<li><a href="#Y">Y</a></li>
			<li><a href="#Z">Z</a></li>
		</ul>
	</div>
	
</div>
</body>
<script src="https://cdn.bootcss.com/zepto/1.2.0/zepto.min.js"></script>
<script src="../js/city.js"></script>
<script src="../js/picker.min.js"></script>
<script src="../js/city-js.js"></script>
<script type="text/javascript">
    //  品牌
    var brands = [
        {id: 1, title: '安利', pinyin: 'anli'},
        {id: 1, title: '安惠', pinyin: 'anhui'},
        {id: 1, title: '嘉康利', pinyin: 'jiakangli'},
        {id: 1, title: '完美', pinyin: 'wanmei'}
    ];
    var char = '', charlist = [];
    var charTpl = [], listTpl = [];
    for (var k = 0; k < brands.length; k++) {
        var ch = brands[k].pinyin.substring(0, 1);
        if (char == ch) {
            charlist[char].push(brands[k]);
            listTpl.push('<div>' + brands[k].title + '</div>');
        } else {
            if (char != '') listTpl.push('</li>');
            char = ch;
            charlist[char] = [brands[k]];
            listTpl.push('<li id="' + char.toUpperCase() + '">');
            listTpl.push('<p>' + char.toUpperCase() + '</p>');
            listTpl.push('<div>' + brands[k].title + '</div>');
            charTpl.push('<li><a href="#' + char + '">' + char.toUpperCase() + '</a></li>');
        }
    }
    listTpl.push('</li>');
    //	console.log(listTpl.join(''));
    //	console.log(charTpl.join(''))
    $(".company").append(listTpl.join(''));
//   选择
	$(".brand").click(function () {
		$("#brand").addClass('show');
	   $("#brand ul li div").click(function () {
           $(".brand").find('.userimg').val($(this).text());
           $("#brand").removeClass('show');
       });
		$('#brand .bls').click(function () {
			$("#brand").removeClass('show');
		})
    });
//   头像上传
    $("#choiseimg").change(function (event) {
        var file = event.target.files[0];
        if(file){
            var reader = new FileReader();
            reader.onload=function (event) {
                var image = event.target.result;
                $(".portrait img").attr('src',image);
            };
            reader.readAsDataURL(file);
        }
    });

//  上传二维码
    $("#qrcodeimg").change(function (event) {
        var file = event.target.files[0];
        if(file){
            var reader = new FileReader();
            reader.onload=function (event) {
                var image = event.target.result;
                var imgs = '<img src='+ image +' class="fitimg"/>';
                $(".qrcode .userimg").text('').append(imgs);
            };
            reader.readAsDataURL(file);
        }
    });
	
	
</script>
</html>